<template>
  <div>
    <ul>
      <li>q</li>
      <li>w</li>
      <li>e</li>
      <li>d</li>
      <li>f</li>
      <li>g</li>
    </ul>
    <local-storage></local-storage>
    <extends></extends>
    <ThisTest></ThisTest>
  </div>
</template>

<script>
import localStorage from '../view/webStorage/localStorage'
import Extends from '@view/js/extends'
import ThisTest from '@view/js/this'
export default {
  name: 'HelloWorld',
  components: {
    localStorage, Extends, ThisTest
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    // 闭包
    window.onload = function () {
      var ul = document.getElementsByTagName('ul')[0]
      var li = ul.getElementsByTagName('li')
      for (var i = 0; i < li.length; i++) {
        (function (i) {
          li[i].onclick = function () {
            console.log(i) // 点击第几个返回第几个
          }
        })(i)
      }
    }
    var str = 'loval'
    console.log(...str)
  },
  methods: {
    // this.setCookie('name','Jane123')
    // console.log(this.getCookie('abc'));

    setCookie (name, value, expiredays) {
      let exDate = new Date()
      exDate.setDate(exDate.getDate() + expiredays)
      document.cookie = name + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exDate.toGMTString()) + ';path=/about'
    },
    getCookie (name) {
      var start = document.cookie.indexOf(name + '=')
      var end = document.cookie.indexOf(';', start)
      if (end === -1) {
        end = document.cookie.length
      }
      return unescape(document.cookie.substring(start, end))
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
